<div class="pure-view-container">
  <div class="x-view-title">${t('ui.infrastructure.profileDetail.title.profileDetail')}</div>
  <link href="${appCss('static/app/infrastructure/profile/profile-detail.css')}" rel="stylesheet" />
  <div class="x-search-bar"></div>
  <div class="x-tool-bar"></div>
  <div><span data-x-name="data.profileItemCode" class="h6"></span><span>-</span><span data-x-name="data.profileItemName"
      class="h6"></span><span> </span><span data-x-name="data.profileItemDesc"></span></div>
  <table data-x-ui="profileSettingTable" class="x-table-custom" data-x-name="data.profileSettings"
    data-x-type="dataGrid">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="levelTypeDesc">${t('ui.infrastructure.profileDetail.field.levelType')}</th>
        <th data-field="valueCode">${t('ui.infrastructure.profileDetail.field.valueCode')}</th>
        <th data-field="remark">${t('ui.infrastructure.profileDetail.field.remark')}</th>
        <th data-field="enableFlagDesc">${t('ui.system.common.field.enableFlag')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="editProfileSettingDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.infrastructure.profileDetail.dialog.editProfileSetting')}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.levelType" />
            <div class="form-group"><label
                for="levelTypeDesc">${t('ui.infrastructure.profileDetail.field.levelType')}</label><input
                type="text" class="form-control" id="levelTypeDesc" name="levelTypeDesc"
                data-x-name="edit.levelTypeDesc" readonly="" /></div>
            <div class="form-group"><label
                for="valueCode">${t('ui.infrastructure.profileDetail.field.valueCode')}</label><input
                type="text" class="form-control" id="valueCode" name="valueCode" data-x-name="edit.valueCode"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 100)}" /></div>
            <div class="form-group"><label
                for="remark">${t('ui.infrastructure.profileDetail.field.remark')}</label><input type="text"
                class="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
            <div class="form-group"><label
                for="enableFlag">${t('ui.system.common.field.enableFlag')}</label><select class="form-control"
                id="enableFlag" name="enableFlag" data-x-name="edit.enableFlag">
                <option value="true" selected="">${t('ui.system.common.option.enableFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.enableFlag.false')}</option>
              </select></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div class="x-footer-bar"><button data-x-ui="backBtn" type="button"
      class="btn btn-secondary">${t('ui.system.common.btn.back')}</button></div>
  <script src="${appJs('app/infrastructure/profile/profile-detail.js')}" type="text/javascript"></script>
</div>